spotrem: add volume knob gesture #3847

thyttan · 2025-05-09T21:41:32Z

Can be tried at: https://thyttan.github.io/BangleApps/?id=spotrem

Edit:
Adds two new modules for dial functionality, one for touch interaction and one for graphics. This is used in spotrem to provide the volume knob.

bobrippling · 2025-05-15T16:02:11Z

Very cool! Works well when I tested it. Do you think it's worth mentioning that the clockwise/anticlockwise gesture detection is stopped after a brief period of no-interaction?

Not for this PR, but if you wanted ideas on going further with this feature, it'd be cool to pull it out to a library and let other apps opt into the clockwise gesture, and during the clockwise gesture, display a circle on screen that follows the user's gesture. But obviously those are much bigger changes!

thyttan · 2025-05-15T17:21:43Z

Thanks :)

Do you think it's worth mentioning that the clockwise/anticlockwise gesture detection is stopped after a brief period of no-interaction?

Yes! Will add that.

[...] it'd be cool to pull it out to a library and let other apps opt into the clockwise gesture, and during the clockwise gesture, display a circle on screen that follows the user's gesture. But obviously those are much bigger changes!

Yes - that's where I started with this. But I switched to this focused implementation first to dial in the UX (pun intended).

Only the drag gesture functionality provided. I intend to add a companion module providing some relevant graphics, sharing the same options object.

thyttan · 2025-08-12T21:20:54Z

@bobrippling this is maybe done now! Please comment any feedback you may have :)

It now adds two new modules for dial functionality, one for touch interaction and one for graphics. This is used in spotrem to provide the volume knob.

thyttan · 2025-08-13T13:57:52Z

modules/Dial_Display.js

+      if (isFill) g.fillCircle(x, y, rad);
+    }
+    if (this.isFirstDraw) {
+      g.setColor(0,0,0).fillCircle(CENTER.x, CENTER.y, 25);


I guess the radii for the drawing operations should not be hardcoded to 25, 23, 9 etc but depend on the DIAL_RECT...

Maybe adding a additional displayRect setting to the options object that if is not set defaults to what the dialRect option is.

Yeah, I think this is ok for now but we could have a follow-up PR which infers a radius from the rect? Or like you say, adds a setting

Yes, lets leave it as is for now :)

bobrippling

@bobrippling this is maybe done now! Please comment any feedback you may have :)

It now adds two new modules for dial functionality, one for touch interaction and one for graphics. This is used in spotrem to provide the volume knob.

Great, nice separation of functionality! I spotted a few things, let me know if I've been unclear or if you've any questions :)

bobrippling · 2025-08-17T18:36:43Z

modules/Dial.md

+
+```JS
+var Dial = require("Dial");
+var dial = new Dial(cb, options)


We don't use Dial here as a constructor (no this and it returns an object explicitly) so the new (while it works) might confuse users. What about:

Suggested change

var dial = new Dial(cb, options)

var dial = dial(cb, options)

(suggested lowercase dial as it's no longer a class too, don't mind if you prefer it Titlecase though)

OK - if that makes more sense I'm all for it.

I looked at the Layout module for inspiration when developing ~~and taking a quick look now I fail to see how they differ in this regard. Out of interest, do they?~~

Sorry, I think I get what you mean now!

bobrippling · 2025-08-17T19:00:08Z

modules/Dial_Display.js

+      if (!isFill) g.drawCircle(x, y, rad);
+      if (isFill) g.fillCircle(x, y, rad);


Perhaps:

Suggested change

if (!isFill) g.drawCircle(x, y, rad);

if (isFill) g.fillCircle(x, y, rad);

if (!isFill) g.drawCircle(x, y, rad);

else g.fillCircle(x, y, rad);

This whole drawCircle should be removed I guess, when I think about it. I intended to use it more but now it's only used to make the small marks around the dial. (I had another design in mind at first where there would be small hollow circles around the dial, except for the one the indicator pointed to which would be filled.)

bobrippling · 2025-08-17T19:01:19Z

modules/Dial_Display.js

+      if (isFill) g.fillCircle(x, y, rad);
+    }
+    if (this.isFirstDraw) {
+      g.setColor(0,0,0).fillCircle(CENTER.x, CENTER.y, 25);


Yeah, I think this is ok for now but we could have a follow-up PR which infers a radius from the rect? Or like you say, adds a setting

bobrippling · 2025-08-17T19:09:47Z

modules/Dial_Display.md

+
+```JS
+var DialDisplay = require("Dial_Display");
+var dialDisplay = new DialDisplay(options);


Same again (as the other comment), but here I think we'll want to change to make it more class-like, or alter how this is used within the dialDisplay function. At the moment it'll be writing to the global object.

For example, in the IDE:

> cb =function (step) { ... } >cb(1) =undefined >cb(1) =undefined // the dial renders successfully // `this` variables are written to the global: >isFirstDraw =false >value =14

Happy to go through a few suggestions for it, if you like

Happy to go through a few suggestions for it, if you like

Please do! Fun with a learning opportunity :) Feel free to commit to this PR.

thyttan added 4 commits May 14, 2025 22:44

spotrem: refactor copying setui ud logic into app

597a47e

spotrem: add volume knob

5f91cf8

spotrem: lint error fix

2966051

spotrem: tweak knob steps per turn, tweak buzz

8a78873

thyttan force-pushed the spotrem branch from 418d2c5 to 8a78873 Compare May 14, 2025 20:44

thyttan added 11 commits May 16, 2025 19:27

spotrem: add info re volume knob to readme

09ee996

spotrem: increase buzz strength for volume dial

0b693cd

spotrem: refactor moving buzzes to callback function

3df424b

spotrem: add double buzz on deactivating volume knob

915546d

Merge remote-tracking branch 'upstream/master' into spotrem

732c633

spotrem: tweak defaults of dial, call w/o options

7be4771

Dial: new module providing a circular dial

068675e

Only the drag gesture functionality provided. I intend to add a companion module providing some relevant graphics, sharing the same options object.

spotrem: refactor to use the Dial module

0696b12

Dial: add documentation (skeleton for now)

d99f528

Dial: tweaks

be7c1de

Dial: move to correct folder

4d8ff49

thyttan marked this pull request as draft May 26, 2025 23:13

thyttan added 11 commits May 31, 2025 22:13

Dial: tweak stepsPerWholeTurn

9af1e6a

Dial: small refactor

e7b0af4

Dial: add contents to documentation

656294b

Dial_Display: complementary graphics to Dial module

0d7fb84

Dial_Display: WIP generate a function drawing the dial

9445bf4

Merge remote-tracking branch 'upstream/master' into spotrem

807add0

Dial_Display: tweaks to debugging code

08e23d8

Dial_Display: drop debugging code

b4bcc6f

Dial: tweak docs

15ceb23

Dial_Display: improve docs

5ed691b

Merge remote-tracking branch 'upstream/master' into spotrem

d5f5b22

thyttan added 3 commits August 12, 2025 23:10

Dial_Display: tweak logic and docs

ea1a716

spotrem: integrate dial graphics

cb82231

Dial_Display: add future work comment to docs

9adab33

thyttan requested a review from bobrippling August 12, 2025 21:19

thyttan marked this pull request as ready for review August 13, 2025 11:13

Dial: update docs re Dial_Display module

902bbf8

thyttan commented Aug 13, 2025

View reviewed changes

bobrippling reviewed Aug 17, 2025

View reviewed changes

	var dial = new Dial(cb, options)
	var dial = dial(cb, options)

		if (!isFill) g.drawCircle(x, y, rad);
		if (isFill) g.fillCircle(x, y, rad);

spotrem: add volume knob gesture #3847

Are you sure you want to change the base?

spotrem: add volume knob gesture #3847

Uh oh!

Conversation

thyttan commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bobrippling commented May 15, 2025

Uh oh!

thyttan commented May 15, 2025

Uh oh!

thyttan commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thyttan Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thyttan Aug 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bobrippling left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thyttan Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bobrippling Aug 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

thyttan commented May 9, 2025 •

edited

Loading

thyttan commented Aug 12, 2025 •

edited

Loading

thyttan Aug 13, 2025 •

edited

Loading

thyttan Aug 17, 2025 •

edited

Loading

thyttan Aug 18, 2025 •

edited

Loading

bobrippling Aug 17, 2025 •

edited

Loading